<template>
  <div class="search-box">
    <input type="text" :value="props.modelValue" @input="handleInput" @keydown.enter="handleSearch" />
    <van-icon name="close" class="icon" v-show="props.modelValue.length" @click="emit('clearSearchContent')" />
    <transition
      enter-active-class=" animate__animated animate__bounceInDown"
      leave-active-class=" animate__animated animate__bounceOutUp"
    >
      <div class="search-suggest" v-show="searchSuggest.length && searchFlag">
        <div class="title">搜索：{{ props.modelValue }}</div>
        <ul>
          <li v-for="(item, index) in searchSuggest" :key="index" @click="handleSearchSuggest(item.keyword)">
            <van-icon name="search"></van-icon>
            <span>{{ item.keyword }}</span>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { searchSuggestList } from "@/service/api/musicRequest";
import type { ISuggsetItem } from "@/types/music/suggestSongType";
import { _debounce } from "@/utils/tools";
import { ref, watch } from "vue";
const props = defineProps<{
  modelValue: string;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: string): void;
  (e: "clearSearchContent"): void;
  (e: "searchMusic", value: string): void;
}>();

const searchSuggest = ref<ISuggsetItem[]>([]),
  searchFlag = ref(false);

watch(
  () => props.modelValue,
  (newValue: string) => {
    newValue.length ? getSuggestListData() : (searchFlag.value = false);
  }
);

const getSuggestListData = _debounce(() => {
  props.modelValue.length &&
    searchSuggestList({
      type: "mobile",
      keywords: props.modelValue,
    }).then((res) => {
      searchSuggest.value = res.result.allMatch;
    });
}, 500);

const handleInput = (e: any) => {
  emit("update:modelValue", e.target.value);
  searchFlag.value = true;
};

const handleSearch = (e: any) => {
  emit("searchMusic", e.target.value);
  searchFlag.value = false;
};

const handleSearchSuggest = (value: string) => {
  emit("update:modelValue", value);
  emit("searchMusic", value);
  searchFlag.value = false;
};
</script>

<style scoped lang="scss">
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  input {
    width: 90%;
    height: 35px;
    box-sizing: border-box;
    margin-top: 10px;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #ccf2f4;
    font-size: 16px;
  }
  .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-20%);
    right: 18px;
    font-size: 18px;
  }
  .search-suggest {
    position: absolute;
    width: 90%;
    top: calc(100% + 14px);
    background: var(--box-color);
    border-radius: 6px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
    z-index: 333;
    overflow: hidden;
    color: var(--font-color);
    .title {
      color: #f00;
      font-size: 20px;
      border-bottom: 1px solid var(--font-light-color);
      padding-bottom: 10px;
    }
    li {
      display: flex;
      align-items: center;
      padding: 15px 0;
      border-bottom: 1px solid var(--font-light-color);
      span {
        margin-left: 10px;
      }
    }
  }
}
</style>
